<template>
  <div class="circle">
    <div class="demo-inner-divider">环形进度条</div>
    <p>以线形表示进度的组件，环内可选择性地配有文字或图标补充显示进度和状态。多用于需要强调进度百分比的情况。</p>
    <e-circle
      :size="130"
      :percent="68"
      stroke-color="#337DFF">
      <span style="font-size:28px">68%</span>
    </e-circle>
    <e-circle
      :size="130"
      :percent="35"
      stroke-color="#F04134">
      <span style="color:#F04134;font-size:28px">!</span>
    </e-circle>
    <e-circle
      :size="130"
      :percent="100"
      stroke-color="#10C038">
      <e-icon
        type="check"
        size="50"
        style="color:#10C038" />
    </e-circle>
    <div class="demo-inner-divider">渐变色环形进度条</div>
    <p>支持定义带渐变色的环形进度条。</p>
    <e-circle
      :size="130"
      :percent="68"
      :stroke-color="['#DB6624', '#FF931D']">
      <span style="font-size:28px">68%</span>
    </e-circle>
    <e-circle
      :size="130"
      :percent="100"
      :stroke-color="['#10882F', '#10C038']">
      <e-icon
        type="check"
        size="50"
        style="color:#10C038" />
    </e-circle>
    <div class="demo-inner-divider">环形进度条尺寸</div>
    <p>环形进度条分为：小、中、大，三种尺寸。 可在不同场景及不同业务需求选择适合尺寸。</p>
    <p>小</p>
    <e-circle
      :size="42"
      :percent="68"
      stroke-color="#337DFF">
      <span style="font-size:12px">68%</span>
    </e-circle>
    <e-circle
      :size="42"
      :percent="35"
      stroke-color="#F04134">
      <span style="color:#F04134;font-size:20px">!</span>
    </e-circle>
    <e-circle
      :size="42"
      :percent="100"
      stroke-color="#10C038">
      <e-icon
        type="check"
        size="20"
        style="color:#10C038" />
    </e-circle>
    <p>中</p>
    <e-circle
      :size="80"
      :percent="68"
      stroke-color="#337DFF">
      <span style="font-size:16px">68%</span>
    </e-circle>
    <e-circle
      :size="80"
      :percent="35"
      stroke-color="#F04134">
      <span style="color:#F04134;font-size:30px">!</span>
    </e-circle>
    <e-circle
      :size="80"
      :percent="100"
      stroke-color="#10C038">
      <e-icon
        type="check"
        size="40"
        style="color:#10C038" />
    </e-circle>
    <p>大</p>
    <e-circle
      :size="130"
      :percent="68"
      stroke-color="#337DFF">
      <span style="font-size:28px">68%</span>
    </e-circle>
    <e-circle
      :size="130"
      :percent="35"
      stroke-color="#F04134">
      <span style="color:#F04134;font-size:60px">!</span>
    </e-circle>
    <e-circle
      :size="130"
      :percent="100"
      stroke-color="#10C038">
      <e-icon
        type="check"
        size="80"
        style="color:#10C038" />
    </e-circle>
    <div class="demo-inner-divider">响应式环形进度条</div>
    <p>响应式的圈形进度，当 宽度 小于等于 20 的时候，进度信息将不会显示在进度圈里面，而是以 Tooltip 的形式显示。</p>
    <e-circle
      :size="14"
      :percent="68"
      stroke-color="#337DFF">
    </e-circle>
    <circle-md class="markdown-body"></circle-md>
  </div>
</template>

<script setup>
import circleMd from '../../docs/circle.md'

</script>

<style lang='less' scoped>
.circle {
  p {
    margin-bottom: 20px;
  }
  .haloe-circle {
    margin-right: 20px;
  }
}

</style>
